<template>
  <div class="category">
    <div class="category-list">
      <!-- <AsideMenu ref="myMenu" :a="a" @update:a="(v:any)=>a=v" :b="2" @aa="66" v-model:modelValue="category"> -->
      <AsideMenu ref="myMenu" @update:a="(v:any)=>a=v" v-model="category">
        <!-- <template #a>
          aaa
        </template>
        <template #b>
          bbb
        </template> -->
      </AsideMenu>
    </div>
    <div class="category-brand">
      {{ a }}
      {{  category }}
      <GridList v-model:aaa="category"></GridList>
      <!-- aaa传参 -->
    </div>
  </div>
</template>

<script setup lang="ts">
  import AsideMenu  from './component/AsideMenu.vue';
  import GridList from './component/GridList.vue';
  
  import { ref } from 'vue';

  let category=ref('显卡') // category分类 如果不设置，默认为分类列表中的第一个，如果设置则为设置的内容


  let a = ref(1)
  let myMenu = ref(null)

  let updateA = (v:any) =>{
    console.log("update:a被调用了");
    a.value = v
  }
  setTimeout(()=>{
    // muMenu.value
    console.log(777, myMenu.value);
    console.log(777,(myMenu.value as any)?.getActiveCategory());
  },1000)
</script>

<style scoped lang="scss">
.category {
    width: 100%;

    display: flex;

    .category-list {
        overflow-y: auto;
    }

    .category-brand {
        flex: 1;
        overflow-y: auto;
    }
  }
</style>